<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/animate.css" />
		<style type="text/css">
			.box {
				width: 100px;
				height: 100px;
				float: left;
				margin: 20px;
				text-align: center;
				line-height: 100px;
				color: white;
				background-color: red;
			}
			
			.demo {
				width: 300px;
				height: 300px;
				background-color: blue;
				margin: 20px auto;
			}
			
			/* hover的时候触发 */
			.demo:hover {
				/* 等效于 添加.swing 这个类 */
				 -webkit-transform-origin: top center;
				 transform-origin: top center;
				 -webkit-animation-name: swing;
				 animation-name: swing;
				 
				background-color: pink;
			}
		</style>
	</head>

	<body>

		<div class="demo animated"></div>

		<!--
			https://daneden.github.io/animate.css/
		-->
		<!--
			animated : 添加动画
			bounce：弹跳 
			infinite：永久的
		-->

		<div class="box animated bounce infinite ">bounce</div>
		<div class="box animated shake infinite ">shake</div>
		<div class="box animated swing infinite ">swing</div>
		<div class="box animated flash infinite ">flash</div>
		<div class="box animated bounceIn infinite ">bounceIn</div>
		<div class="box animated bounceOut infinite ">bounceOut</div>
		<div class="box animated flipInX infinite ">flipInX</div>
		<div class="box animated fadeIn infinite ">fadeIn</div>
		<div class="box animated fadeInDown infinite ">fadeInDown</div>
		<div class="box animated rollIn infinite ">rollIn</div>
		<div class="box animated rollOut infinite ">rollOut</div>
		<div class="box animated zoomOutLeft infinite ">zoomOutLeft</div>

	</body>

</html>